<template>
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName">
        <el-tab-pane label="应付余额" name="1"></el-tab-pane>
        <el-tab-pane label="预估应付" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 1">
      <Balance :optionsData="optionsData" />
    </template>
    <template v-else>
      <Forecast :optionsData="optionsData" />
    </template>
  </VPage>
</template>
<script setup lang="jsx">
import Balance from "./components/Balance/index";
import Forecast from "./components/Forecast/index";
import { logisticsBpConfig } from "@/api/index.js";
import { getCurrency } from "@/api/public.js";

const activeName = ref("1");
const optionsData = reactive({});
const getLogisticsBpConfig = async () => {
  const { data } = await logisticsBpConfig();
  optionsData.BpConfig = data || [];
};
getLogisticsBpConfig();
const getCurrencyList = async () => {
  const { data } = await getCurrency();
  optionsData.currency = data || [];
};
getCurrencyList();
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
